<!-- 订单列表 -->
<template>
  <div class="content" v-loading="loading">
    <web-header></web-header>
    <div style="margin-bottom:60px;">
      <div v-for="i in cartList" :key="i.id" class="borderBottom">
        <div class="box">
          <div class="boxLeft">
            <img v-if="i.picUrl" :src="i.picUrl" width="120" height="120" alt="">
            <img v-else src="@/assets/images/1481161992.jpg" width="120" height="120" alt="">
          </div>
          <div class="boxRight">
            <!-- <div>
              <p class="orderTitle">{{i.categoryName}}</p>
              <p class="orderDel">删除</p>
            </div> -->
            <div>
              <p><span class="gray">{{$t('lan.name')}}：</span><span>{{i.name}}</span></p>
              <p><span class="gray">{{$t('lan.phone')}}：</span><span>{{i.mobile}}</span></p>
              <p><span class="gray">{{$t('lan.email')}}：</span><span>{{i.email}}</span></p>
            </div>
            <div>
              <p :title="i.address" class="ellipsis"><span class="gray">{{$t('lan.Address')}}：</span>{{i.address}} </p>
              <p v-if="i.customerType=='1'"><span class="gray">{{$t('lan.certificate')}}：</span>{{i.cardType=='1'?$t('lan.card'):i.cardType=='2'?'出入境登记证':$t('lan.passport')}} </p>
              <p v-if="i.customerType=='1'"><span class="gray">{{$t('lan.number')}}：</span>{{i.cardNo}}</p>
              <p v-if="i.customerType=='2'" style="flex:2"><span class="gray">{{$t('lan.company')}}：</span>{{i.companyName}}</p>
            </div>
            <div>
              <p><span class="gray">{{$t('lan.orderNumber')}}：</span>{{i.sn}}</p>
              <p><span class="gray ">{{$t('lan.amt')}}：</span><span :style="{color:'#EA5420'}" class="font-w">${{i.amt}}</span></p>
              <p><span class="gray">{{$t('lan.status')}}：</span><span :style="{color:i.status=='2'?'#67c23a':'#FF4949'}">{{i.statusName}}</span></p>
            </div>
          </div>
          <div>
            <p class="query" @click="queryDetail(i)">{{$t('lan.detail')}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="data.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="data.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="$t('lan.orderDetail')" :visible.sync="showModal" width="1200px" top="5vh">
      <div class="orderBox" style="color:#2c2c2c">
        <el-row>
          <el-col :span="8">
            <div><span class="gray">{{$t('lan.name')}}：</span>{{orderDetail.name}}</div>
          </el-col>
          <el-col :span="8">
            <div><span class="gray">{{$t('lan.phone')}}：</span>{{orderDetail.mobile}}</div>
          </el-col>
          <el-col :span="8">
            <div><span class="gray">{{$t('lan.email')}}：</span>{{orderDetail.email}}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="ellipsis" :title="orderDetail.address"><span class="gray">{{$t('lan.Address')}}：</span>{{orderDetail.address}}</div>
          </el-col>
          <el-col :span="8" v-if="orderDetail.customerType=='1'">
            <div><span class="gray">{{$t('lan.certificate')}}：</span>{{orderDetail.cardType=='1'?$t('lan.card'):orderDetail.cardType=='2'?'出入境登记证':$t('lan.passport')}} </div>
          </el-col>
          <el-col :span="8" v-if="orderDetail.customerType=='1'">
            <div><span class="gray">{{$t('lan.number')}}：</span>{{orderDetail.cardNo}}</div>
          </el-col>
          <el-col :span="8" v-if="orderDetail.customerType=='2'">
            <div><span class="gray">{{$t('lan.company')}}：</span>{{orderDetail.companyName}}</div>
          </el-col>
          <el-col :span="8">
            <div><span class="gray">{{$t('lan.orderNumber')}}：</span><span>{{orderDetail.sn}}</span></div>
          </el-col>
          <el-col :span="8">
            <div><span class="gray">{{$t('lan.amt')}}：</span><span :style="{color:'#EA5420'}" class="font-w">${{orderDetail.amt}}</span></div>
          </el-col>
          <el-col :span="8">
            <div><span class="gray">{{$t('lan.status')}}：</span><span :style="{color:orderDetail.status=='2'?'#67c23a':'#FF4949'}">{{orderDetail.statusName}}</span></div>
          </el-col>
        </el-row>
        <div class="product" v-for="i in orderDetail.orderItemBOList" :key="i.id">
          <el-row>
            <el-col :span="5">
              <img v-if="i.picUrl" :src="i.picUrl" width="180" height="180" alt="">
              <img v-else src="@/assets/images/1481161992.jpg" width="180" height="180" alt="">
            </el-col>
            <el-col :span="18">
              <el-col :span="24">
                <div class="lineHeight32 productDetail">{{i.categoryName}}</div>
              </el-col>
              <el-col>
                <div class="lineHeight32 productDetail">
                  <el-col :span="8">
                    <span class="gray">{{$t('lan.auxiliaryNum')}}：</span>{{i.subCategoryTotalCount}}
                  </el-col>
                  <el-col :span="8">
                    <span class="gray">{{$t('lan.totalNumDoors')}}：</span>{{i.doorTotalCount}}
                  </el-col>
                  <el-col :span="8">
                    <span class="gray">{{$t('lan.system')}}：</span><span>{{i.operationCode}}</span>
                    <span>{{i.serverFlag === '1'?$t('lan.serverRequired'):$t('lan.noServerRequired')}}</span>
                  </el-col>
                </div>
              </el-col>
              <el-col>
                <div class="lineHeight32 productDetail">
                  <el-col :span="8">
                    <span class="gray">{{$t('lan.doorColor')}}：</span>{{i.colorValue?i.colorValue:''}}
                    <span :class="i.deviceColor!='11'?'colorValue':''" :style="{background:i.colorValue?'':formatColor(i.deviceColor)}"></span>
                  </el-col>
                  <el-col :span="8">
                    <span class="gray">{{$t('lan.cabinetColor')}}：</span>{{i.cabinetColorValue?i.cabinetColorValue:''}}
                    <span :class="i.cabinetColor!='11'?'colorValue':''" :style="{background:i.cabinetColorValue?'':formatColor(i.cabinetColor)}"></span>
                  </el-col>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { colorList } from '../common'
import { orderList, getOrderDetail } from '../api'
import { Notification } from 'element-ui'
export default {
  data () {
    return {
      showModal: false,//是否显示详情
      orderDetail: {},
      cartList: [],
      loading: false,
      total: null,
      data: {
        pageSize: 10,
        currentPage: 1,
      },
    }
  },
  methods: {
    formatColor (id) {
      for (let i of colorList) {
        if (id === i.id) return i.value
      }
    },
    async queryDetail (row) {
      const result = await getOrderDetail(row.sn)
      this.orderDetail = result
      this.showModal = true
    },
    handleSizeChange (val) {
      this.data.pageSize = val
      this.fetchCatList()
    },
    handleCurrentChange (val) {
      this.data.currentPage = val
      this.fetchCatList()
    },
    async fetchCatList () {
      try {
        this.loading = true
        const data = await orderList({ userId: JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')).id : '', ...this.data })
        this.cartList = data.datas
        this.total = data.totalRows
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
  },
  created () {
    this.fetchCatList();
  },
}
</script>
<style scoped>
.block {
  position: fixed;
  bottom: 10px;
}
.content {
  width: 1200px;
  margin: 20px auto;
}
.borderBottom {
  overflow: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.borderBottom:last-child {
  border-bottom: none;
}
.box {
  display: flex;
  align-items: center;
}
.boxLeft {
  flex: 0 0 140px;
}
.boxRight {
  color: #2c2c2c;
  flex: 1;
}
.boxRight div {
  display: flex;
  padding-bottom: 15px;
}
.boxRight div p {
  flex: 1;
  font-size: 14px;
}
.query {
  color: #409eff;
  cursor: pointer;
  font-size: 14px;
}
.orderBox {
  padding: 20px 30px;
  font-size: 14px;
  color: #7b7b7b;
}
.orderBox >>> .el-col {
  padding: 10px 0px;
}
.product {
  margin-top: 20px;
}
.product >>> .el-col {
  padding: 0px;
}
.lineHeight32 {
  line-height: 42px;
}
.productDetail {
  font-size: 14px;
  color: #7b7b7b;
}
.colorValue {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #ccc;
  vertical-align: middle;
}
.content >>> .el-dialog__body {
  padding: 0px !important;
}
</style>